<table border="1" width="500">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>张三</td>
            <td>24</td>
            <td>Web前端</td>
        </tr>
        <tr>
            <td>6</td>
            <td>李四</td>
            <td>21</td>
            <td>交互设计师</td>
        </tr>
        <tr>
            <td>17</td>
            <td>张大千</td>
            <td>28</td>
            <td>交互设计师</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王二</td>
            <td>24</td>
            <td>C++程序员</td>
        </tr>
        <tr>
            <td>22</td>
            <td>马六</td>
            <td>30</td>
            <td>测试员</td>
        </tr>
    </tbody>


    <script>
        ! function(window, document, $, undefined) {
            $('th').on('click', function() {
                let $this = $(this)
                let index = $this.index()
                let arr = []

                $('tbody>tr').each(function(index, item) {
                    arr.push($(this))
                })
                arr.sort(function(a, b) {
                    if (isNaN(a.find(`td:eq(${index})`).html())) {
                        return a.find(`td:eq(${index})`).html().charCodeAt() - b.find(`td:eq(${index})`).html().charCodeAt()
                    } else {
                        return a.find(`td:eq(${index})`).html() - b.find(`td:eq(${index})`).html()
                    }

                })
                $('tbody').append(arr)
            })
        }(window, document, jQuery)
    </script>
</table>